<template>
    <div class="my" v-if="userinfoData.value">
        <img src="../../public/mybg.jpg" alt="" class="background">
        <div class="explain">
            <div class="info">
                <img :src="`../../public/img/${userinfoData.value.icon}`" alt="" class="avatar">
                <p>{{ userinfoData.value.name }}</p>
                <img src="../../public/img/go2.png" alt="" class="go">
            </div>
            <div class="button">
                <button class="course">我的课程</button>
                <button class="video">缓存视频</button>
            </div>
        </div>
        <div class="data-sync">
            <img src="../../public/img/6.jpg" alt="">
            <div class="details">
                <h4>数据同步</h4>
                <p>点击立即同步，上传记录</p>
            </div>
            <button class="sync-btn">立即同步</button>
        </div>
        <div class="study">
            <div class="days">
                <h4>{{ userinfoData.value.days }}天</h4>
                <p>坚持天数</p>
            </div>
            <div class="chapter">
                <h4>{{ userinfoData.value.chapter }}章</h4>
                <p>学习章节</p>
            </div>
            <div class="Accuracy">
                <h4>{{ userinfoData.value.Accuracy }}%</h4>
                <p>练习正确率</p>
            </div>
        </div>
        <div class="function">
            <router-link to="/Course" v-if="functionData.length > 0">
                <div class="function-item">
                    <img :src="`../../public/img/${functionData[0].icon}`" alt="">
                    <p>{{ functionData[0].name }}</p>
                </div>
            </router-link>
            <div class="function-item" v-for="(item, index) in functionData.slice(1)" :key="index">
                <img :src="`../../public/img/${item.icon}`" alt="">
                <p>{{ item.name }}</p>
            </div>
            <div class="function-item"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, defineProps } from 'vue';
import axios from 'axios';

const userinfoData = reactive({})
const functionData = ref([])

const props = defineProps({
    userinfoData: {
        type: Object,
        required: true
    },
    functionData: {
        type: Array,
        required: true
    }
})

onMounted(() => {
    axios.get('../../public/data.json').then(response => {
        userinfoData.value = response.data.my["user-info"]
        functionData.value = response.data.my.function
    }).catch(error => {
        console.log('请求失败:', error)
    })
})
</script>

<style>
.my .background {
    width: 100%;
    height: auto;
}

.my {
    position: relative;
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.my .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
}

.my .info .avatar {
    position: absolute;
    top: 52px;
    left: 34px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid white;
}

.my .info p {
    position: absolute;
    top: 74px;
    padding-left: 10px;
    flex-grow: 1;
    margin: 0 -72px;
    font-size: 18px;
    color: white;
}

.my .info .go {
    position: absolute;
    top: 74px;
    right: 16px;
    width: 28px;
    height: 28px;
}

.my .button {
    display: flex;
    justify-content: space-around;
    width: 90%;
}

.my .button button {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.my .button .course {
    background-color: transparent;
    width: 124px;
    border: 1px solid #fff;
    position: absolute;
    top: 138px;
    left: 44px;
    color: white;
}

.my .button .video {
    background-color: transparent;
    width: 124px;
    border: 1px solid #fff;
    position: absolute;
    top: 138px;
    right: 44px;
    color: white;
}

.my .data-sync {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: 20px;
    position: relative;
}

.my .data-sync img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.my .data-sync .details {
    flex-grow: 1;
    margin-left: 10px;
}

.my .data-sync .details h4 {
    margin: 0;
    text-align: left;
    font-size: 16px;
    color: #333;
}

.my .data-sync .details p {
    margin: 0;
    text-align: left;
    font-size: 12px;
    color: #666;
}

.my .data-sync .sync-btn {
    background-color: transparent;
    color: #3f81f1;
    padding: 8px 16px;
    border: 1px solid #3f81f1;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.my .study {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    padding: 10px 20px;
    background-color: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: 20px;
}

.my .study h4 {
    margin: 5px 0;
    font-weight: bold;
}

.my .study p {
    font-weight: 300;
    margin-top: 12px;
    margin-bottom: 8px;
}

.my .function {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin-top: 20px;
}

.my .function-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    margin-bottom: 20px;
}

.my .function-item:nth-child(5),
.my .function-item:nth-child(6),
.my .function-item:nth-child(7) {
    margin-bottom: 10px;
}

.my .function a {
    text-decoration: none;
    padding-left: 35px;
}

.my .function-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
}

.my .function-item p {
    font-size: 12px;
    color: #666;
    margin: 0;
    white-space: nowrap
}
</style>